/**
 * 系统管理 用户管理
 */
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资源申请单</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索：">
                <el-select size="small" v-model="formInline.isLock" placeholder="申请单状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待审批" value="N"></el-option>
                    <el-option label="已审批" value="Y"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-input size="small" v-model="formInline.userName" placeholder="输入申请单号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table size="small" @selection-change="selectChange" :data="userData" highlight-current-row v-loading="loading"
            border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="50">
            </el-table-column>
            <el-table-column align="center" sortable prop="deptName" label="申请单号" width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="userName" label="数据库类型" width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="userRealName" label="业务系统名称" width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="userMobile" label="数据库名称" width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="userSex" label="账号" min-width="50">
            </el-table-column>
            <el-table-column align="center" sortable prop="userEmail" label="密码" min-width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="editTime" label="预计使用存储量" min-width="150">
                <template slot-scope="scope">
                    <div>{{ scope.row.editTime | timestampToTime }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="userEmail" label="申请人" min-width="120">
            </el-table-column>
            <el-table-column align="center" sortable prop="userEmail" label="申请单位" min-width="150">
            </el-table-column>
            <el-table-column align="center" sortable prop="userEmail" label="附件" min-width="150">
            </el-table-column>
            <el-table-column label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">审批</el-button>
                    <el-button size="mini" type="success" @click="refreshCache(scope.$index, scope.row)">撤回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
            <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
                <el-form-item label="用户名" prop="userName">
                    <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="userRealName">
                    <el-input size="small" v-model="editForm.userRealName" auto-complete="off"
                        placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select size="small" v-model="editForm.roleId" placeholder="请选择" class="userRole">
                        <el-option label="公司管理员" value="1"></el-option>
                        <el-option label="普通用户" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="userMobile">
                    <el-input size="small" v-model="editForm.userMobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="邮件" prop="userEmail">
                    <el-input size="small" v-model="editForm.userEmail" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="userSex">
                    <el-radio v-model="editForm.userSex" label="男">男</el-radio>
                    <el-radio v-model="editForm.userSex" label="女">女</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title"
                    @click="submitForm('editForm')">保存</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
// 导入请求方法
import {
    userList,
    userSave,
    userDelete,
    userPwd,
    userExpireToken,
    userFlashCache,
    userLock,
    UserDeptTree,
    UserDeptSave,
    UserDeptdeptTree,
    UserChangeDept
} from '@/api/userMG'
import Pagination from '@/components/Pagination'
export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            title: '添加用户',
            editFormVisible: false, //控制编辑页面显示与隐藏
            dataAccessshow: false, //控制数据权限显示与隐藏
            unitAccessshow: false, //控制所属单位隐藏与显示
            // 编辑与添加
            editForm: {
                userId: '',
                userName: '',
                userRealName: '',
                roleId: '',
                userMobile: '',
                userEmail: '',
                userSex: '',
                token: localStorage.getItem('logintoken')
            },
            // 部门参数
            unitparm: {
                userIds: '',
                deptId: '',
                deptName: ''
            },
            // 选择数据
            selectdata: [],
            // rules表单验证
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                userRealName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
                userMobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
                        required: true,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                userEmail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        required: true,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
                userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
            },
            // 删除用户
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            // 重置密码
            resetpsd: {
                userId: '',
                token: localStorage.getItem('logintoken')
            },
            // 用户下线
            offline: {
                token: localStorage.getItem('logintoken')
            },
            // 请求数据参数
            formInline: {
                page: 1,
                limit: 10,
                deptId: '',
                userName: '',
                userMobile: '',
                isLock: ''
            },
            //用户数据
            userData: [],
            // 数据权限
            UserDept: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            // 选中
            checkmenu: [],
            //参数role
            saveroleId: '',
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },

    /**
     * 数据发生改变
     */
    watch: {},

    /**
     * 创建完毕
     */
    created() {
        this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取数据方法
        getdata(parameter) {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 12,
                data: [
                    {
                        addUser: '1',
                        editUser: '1',
                        addTime: null,
                        editTime: 1527411068000,
                        userId: 1,
                        systemNo: 'pmd',
                        userName: 'root',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '超级管理员',
                        userSex: '女',
                        userMobile: '138123456789',
                        userEmail: '111@qq.com',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 1
                    },
                    {
                        addUser: '1',
                        editUser: '1',
                        addTime: null,
                        editTime: 1527410579000,
                        userId: 3,
                        systemNo: 'mc',
                        userName: 'zengzhuo',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '系统管理员',
                        userSex: 'M',
                        userMobile: '18616988966',
                        userEmail: '222@qq.com',
                        isLock: 'N',
                        deptId: 2,
                        deptName: 'xxxx',
                        roleId: 101
                    },
                    {
                        addUser: '1',
                        editUser: '4',
                        addTime: null,
                        editTime: 1527411586000,
                        userId: 4,
                        systemNo: 'ec',
                        userName: 'admin',
                        userPassword: '59ba8b7dda9ff79186311a5a9fa155ca',
                        userRealName: '超级管理员',
                        userSex: '女',
                        userMobile: '138123456789',
                        userEmail: 'huangxuekun@founder.com',
                        isLock: 'N',
                        deptId: 2,
                        deptName: 'xxxx',
                        roleId: 3
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526275128000,
                        editTime: 1526284402000,
                        userId: 28,
                        systemNo: null,
                        userName: 'eee111',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '123111',
                        userSex: '男',
                        userMobile: '12354342345',
                        userEmail: '111232@qq.com',
                        isLock: 'N',
                        deptId: 4,
                        deptName: 'zxxxxx',
                        roleId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526284533000,
                        editTime: 1526284533000,
                        userId: 37,
                        systemNo: null,
                        userName: 'ces',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: 'sesfg',
                        userSex: '男',
                        userMobile: '12312312312',
                        userEmail: '122111111',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526285228000,
                        editTime: 1526285228000,
                        userId: 43,
                        systemNo: null,
                        userName: '22',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '22',
                        userSex: '男',
                        userMobile: '222',
                        userEmail: '222',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526448593000,
                        editTime: 1526448593000,
                        userId: 58,
                        systemNo: null,
                        userName: '1',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '1',
                        userSex: '女',
                        userMobile: '13607118810',
                        userEmail: '1@qq.com',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526452698000,
                        editTime: 1526520341000,
                        userId: 60,
                        systemNo: null,
                        userName: '222222222',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '222222222222',
                        userSex: '男',
                        userMobile: '13607118810',
                        userEmail: '111@qq.com',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526452731000,
                        editTime: 1526452731000,
                        userId: 61,
                        systemNo: null,
                        userName: '33333333333333',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '4444444444444444444',
                        userSex: '女',
                        userMobile: '13607118810',
                        userEmail: 'qqq@qq.com',
                        isLock: 'N',
                        deptId: 1,
                        deptName: 'xxxx',
                        roleId: 2
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526452756000,
                        editTime: 1527128981000,
                        userId: 62,
                        systemNo: null,
                        userName: '211111111',
                        userPassword: 'e10adc3949ba59abbe56e057f20f883e',
                        userRealName: '21111111111',
                        userSex: '男',
                        userMobile: '13601478451',
                        userEmail: '222222@qq.com',
                        isLock: 'N',
                        deptId: 17,
                        deptName: 'v',
                        roleId: 2
                    }
                ]
            }
            this.loading = false
            this.userData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            // 模拟数据结束

            /***
             * 调用接口，注释上面模拟数据 取消下面注释
             */
            // 获取用户列表
            // userList(parameter).then(res => {
            //   this.loading = false
            //   if (res.success == false) {
            //     this.$message({
            //       type: 'info',
            //       message: res.msg
            //     })
            //   } else {
            //     this.userData = res.data
            //     // 分页赋值
            //     this.pageparm.currentPage = this.formInline.page
            //     this.pageparm.pageSize = this.formInline.limit
            //     this.pageparm.total = res.count
            //   }
            // })
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        //搜索事件
        search() {
            this.getdata(this.formInline)
        },
        //审批页面显示
        handleEdit: function (index, row) {
            this.editFormVisible = true
        },
        // 编辑、添加提交方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    this.editFormVisible = false

                } else {
                    return false
                }
            })
        },
        // 选择复选框事件
        selectChange(val) {
            this.selectdata = val
        },
        // 关闭编辑、增加弹出框
        closeDialog(dialog) {
            this.editFormVisible = false
        },
        // 撤回操作
        refreshCache(index, row) {
            this.$confirm('确认撤回该审批信息？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>

 